<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Variable Font example - width</title>

    <style>
      @font-face {
        font-family: "Amstelvar VF";
        src: url("fonts/AmstelvarAlpha-VF.woff2") format("woff2-variations");
        font-weight: 300 900;
        font-stretch: 35% 100%;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Amstelvar VF";
        src: url("fonts/Amstelvar-Italic-VF.woff2") format("woff2-variations");
        font-weight: normal;
        font-stretch: normal;
        font-style: italic;
        font-display: swap;
      }

      html {
        box-sizing: border-box;
        font-size: 100%;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      body {
        font:
          1.2em "Amstelvar VF",
          Georgia,
          serif;
        margin: 20px;
        padding: 0;
      }

      .wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
      }

      @media screen and (min-width: 35rem) {
        .wrapper {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media screen and (min-width: 52rem) {
        .wrapper {
          grid-template-columns: 1fr 1fr 1fr;
        }
      }

      textarea {
        font-family: monospace;
        display: block;
        margin-bottom: 10px;
        height: 160px;
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        color: #4d4e53;
        padding: 1rem 0;
        width: 100%;
      }

      textarea:nth-of-type(1) {
        height: 130px;
      }

      textarea:nth-of-type(2) {
        height: 100px;
      }

      .playable-buttons {
        text-align: right;
        width: 100%;
        padding: 0.5rem 0;
        font-size: 100%;
      }

      .section {
        width: 100%;
        border: 1px solid #4d4e53;
        border-radius: 2px;
        padding: 10px 14px 10px 10px;
        margin-bottom: 10px;
      }

      .section input {
        display: block;
        margin: 5px;
      }

      .container * {
        font-size: 4rem;
        margin: 1.5rem 0;
      }

      .demo3 {
        --text-axis: 100;
      }
    </style>
    <style class="editable1">
      /* width range is 55% to 100% */
      .container1 * {
        font-stretch: 100%;
      }
    </style>
    <style class="editable2">
      /* width range is an integer from 55 to 100 */
      .container2 * {
        font-variation-settings: "wdth" 100;
      }
    </style>
    <style class="editable3">
      /* Adjust with slider & custom property */
      .container3 * {
        font-variation-settings: "wdth" var(--text-axis);
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="demo1">
        <section class="section section1">
          <div class="container container1">
            <p>Width</p>
          </div>
        </section>
        <textarea class="playable-css1">
/* width range is from 55% to 100% */
.container1 * {
  font-stretch: 100%;
}</textarea
        >
        <textarea id="code1" class="playable-html1">
<div class="container container1">
  <p>Width</p>
</div></textarea
        >
      </div>
      <div class="demo2">
        <section class="section section2">
          <div class="container container2">
            <p>Width</p>
          </div>
        </section>
        <textarea class="playable-css2">
/* width range is an integer from 55 to 100 */
.container2 * {
  font-variation-settings: 'wdth' 100;
}</textarea
        >
        <textarea id="code2" class="playable-html2">
<div class="container container2">
  <p>Width</p>
</div></textarea
        >
      </div>
      <div class="demo3">
        <section class="section section3">
          <div class="container container3">
            <p>Width</p>
          </div>
        </section>
        <textarea class="playable-css3">
/* Adjusted with slider and custom property */
.container3 * {
  font-variation-settings: 'wdth' var(--text-axis);
}</textarea
        >
        <textarea id="code3" class="playable-html3">
<div class="container container3">
  <p>Width</p>
</div></textarea
        >
        <div class="controls range-slider">
          <label for="text-axis">Adjust Width: </label
          ><input
            type="range"
            name="range-slider"
            value="100"
            id="text-axis"
            class="controls--slider"
            min="55"
            max="100" />
        </div>
      </div>
    </div>
    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script>
    var section1 = document.querySelector(".section1");
    var editable1 = document.querySelector(".editable1");
    var textareaHTML1 = document.querySelector(".playable-html1");
    var textareaCSS1 = document.querySelector(".playable-css1");
    var section2 = document.querySelector(".section2");
    var editable2 = document.querySelector(".editable2");
    var textareaHTML2 = document.querySelector(".playable-html2");
    var textareaCSS2 = document.querySelector(".playable-css2");
    var section3 = document.querySelector(".section3");
    var editable3 = document.querySelector(".editable3");
    var textareaHTML3 = document.querySelector(".playable-html3");
    var textareaCSS3 = document.querySelector(".playable-css3");
    var rangeinput = document.querySelector(".controls--slider");
    var reset = document.getElementById("reset");
    var htmlCode1 = textareaHTML1.value;
    var cssCode1 = textareaCSS1.value;
    var htmlCode2 = textareaHTML2.value;
    var cssCode2 = textareaCSS2.value;
    var htmlCode3 = textareaHTML3.value;
    var cssCode3 = textareaCSS3.value;

    function fillCode() {
      editable1.innerHTML = textareaCSS1.value;
      section1.innerHTML = textareaHTML1.value;
      editable2.innerHTML = textareaCSS2.value;
      section2.innerHTML = textareaHTML2.value;
      editable3.innerHTML = textareaCSS3.value;
      section3.innerHTML = textareaHTML3.value;
      rangeinput.value = 100;
      document.querySelector(".demo3").style.setProperty("--text-axis", 100);
    }

    reset.addEventListener("click", function () {
      textareaHTML1.value = htmlCode1;
      textareaCSS1.value = cssCode1;
      textareaHTML2.value = htmlCode2;
      textareaCSS2.value = cssCode2;
      textareaHTML3.value = htmlCode3;
      textareaCSS3.value = cssCode3;
      fillCode();
    });

    textareaHTML1.addEventListener("input", fillCode);
    textareaCSS1.addEventListener("input", fillCode);
    textareaHTML2.addEventListener("input", fillCode);
    textareaCSS2.addEventListener("input", fillCode);
    textareaHTML3.addEventListener("input", fillCode);
    textareaCSS3.addEventListener("input", fillCode);
    window.addEventListener("load", fillCode);

    // get the inputs
    const inputs = [].slice.call(
      document.querySelectorAll(".demo3 .controls input"),
    );

    // listen for changes
    inputs.forEach((input) => input.addEventListener("change", handleUpdate));
    inputs.forEach((input) =>
      input.addEventListener("mousemove", handleUpdate),
    );

    function handleUpdate(e) {
      document
        .querySelector(".demo3")
        .style.setProperty(`--${this.id}`, this.value);
    }
  </script>
</html>
